<template>
  <div>
      <input type="text" placeholder="请输入你的任务名称，按回车键确认" @keyup.enter="add" v-model="input">
  </div>
</template>

<script>
import { nanoid } from 'nanoid'
export default {
    name:'myHeader',
    data(){
        return {
            input:'',
        }
    },
    methods: {
        add() {
            if (this.input.trim()) {
                let todoItem = {id:nanoid(), name:this.input, isChanged:false}
                this.$emit('addItem', todoItem)
                this.input = ''
            }else {
                this.input = ''
                return alert('输入不能为空')
            }
            
        }
    },
}
</script>

<style scoped>
    input{
        width: 490px;
        margin: 5px;
        height: 24px;
    }
</style>